<template>
	<view class="lgoin-model">
		<view>
			<view class="logo-box">
				<view class="logo">
					<div class="img">
						<span>logo</span>
					</div>
					<div class="img-shade"></div>
				</view>
			</view>
			<view class="form-box">
				<u-input placeholder="请输入账号/手机号" type="text" v-model="form.username"></u-input>
				<u-input placeholder="请输入密码" type="password" v-model="form.password"></u-input>
				<u-button type="primary" shape="circle" @click="_initSendLogin">登录</u-button>
				<view class="link-box">
					<span class="register" @click="go('/#/pages/register/register')">注册账号</span>
					<span class="backPassword">找回密码</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				}
			}
		},
		onLoad(e) {
			if(e !== undefined){
				// console.log(e.phoneNumber)
				this.form.username = e.phoneNumber;
			}
			
		},
		methods: {
			go (url) {
				window.location.href = url
			},
			// 调用登录接口
			async _initSendLogin() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/sys/mLogin',
					method: "POST",
					data: {
						username: this.form.username,
						password: this.form.password
					}
				})
				console.log(news)
				if(news.success){
					uni.showToast({
						title: "登录成功"
					})
				}else{
					console.log(news)
				}
			},
		}
	}
</script>

<style lang="scss">
.lgoin-model {
	position: relative;
	width: 100vw;
	// height: 70vh;
	display: flex;
	overflow-y: hidden;
	> uni-view {
		margin: auto;
	}
	.logo-box {
		width: 100vw;
		display: flex;
		padding: 20px;
		box-sizing: border-box;
		.logo {
			width: 100%;
			margin: auto;
			> div {
				width: 20vw;
				height: 20vw;
				margin: 0 auto;
				border-radius: 5px;
				&.img {
					background-color: rgba(87, 141, 230, 0.7);
					color: white;
					display: flex;
					span {
						margin: auto;
					}
				}
				&.img-shade {
					margin-top: 2px;
					background-color: unset;
					background-image: linear-gradient(rgba(87, 141, 230, 0.3), rgba(87, 141, 230, 0) 50%);
				}
			}
		}
	}
	.form-box {
		height: auto;
		padding: 20px 10vw;
		> * {
			margin: auto;
			margin-bottom: 5vh;
			&.u-input {
				border-bottom: 1px solid black;
			}
			&.link-box {
				margin-top: -2vh;
				justify-content: space-between;
				display: flex;
				.register {
					color: rgba(87, 141, 230, 1);
				}

			}
		}
	}
}
</style>
